<template>
	<div class="KuaiJieRuKou">
		<div class="KuaiJieRuKou-1">快捷入口</div>
		<div class="KuaiJieRuKou-2">
			<div>
				<img src="../img/房屋管理.png" width="22px" height="22px" />
				<span>房屋管理</span>
			</div>
			<div>
				<img src="../img/住户管理.png" width="22px" height="22px" />
				<span>住户管理</span>
			</div>
			<!-- <div>
				<img src="../img/车位租赁.png" width="22px" height="22px" />
				<span>车位租赁</span>
			</div> -->
			<div>
				<img src="../img/生成费用.png" width="22px" height="22px" />
				<span>生成费用</span>
			</div>
			<!-- <div>
				<img src="../img/收退款记录.png" width="22px" height="22px" />
				<span>收退款记录</span>
			</div> -->
			<div>
				<img src="../img/工单管理.png" width="22px" height="22px" />
				<span>工单管理</span>
			</div>
			<div>
				<img src="../img/员工管理.png" width="22px" height="22px" />
				<span>员工管理</span>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
</script>

<style scoped>
	.KuaiJieRuKou {
		background-color: white;
		width: 1390px;
		margin-left: 10px;
		border-radius: 10px;
		height: 180px;
	}
	
	.KuaiJieRuKou-1 {
		padding-top: 10px;
		padding-left: 10px;
		font-weight: bold;
		width: 80px;
	}
	
	.KuaiJieRuKou-2 {
		display: flex;
		/* 使用flexbox布局 */
		justify-content: space-around;
		/* 水平居中对齐，可以根据需要调整 */
		align-items: center;
		/* 垂直居中对齐 */
	
	}
	
	.KuaiJieRuKou-2 div {
		text-align: center;
		/* 文字居中对齐 */
		padding: 10px;
		/* 可以根据需要调整 */
		font-weight: bold;
		cursor: pointer;
		margin-top: 30px;
	}
	
	.KuaiJieRuKou-2 :hover {
		background-color: #F5F5F5;
	}
	
	.KuaiJieRuKou-2 img {
		display: block;
		/* 让图片以块级元素显示，避免默认的基线对齐 */
		margin: 0 auto;
		/* 图片居中对齐 */
		padding-bottom: 7px;
	}
</style>